<!DOCTYPE html>
<html lang="zh-CN">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css/my.css">
	<script src="js/vue.js"></script>
</head>

<body>
	<div id="app">
		<audio controls ref="realPlayer" id="realPlayer" style="display: none;">
		</audio>
		<div class="container">
			<!-- <h1 id="article-title">我的个人主页</h1> -->
			<div class="head-content">
				<!-- 个人信息卡片：头像，昵称，个性签名 -->
				<div class="person-card">
					<!-- 头像部分 -->
					<div id="avatar">
						<img src="https://gitee.com/warrior__night/my-picture-bed/raw/master/%E5%A4%B4%E5%83%8F.jpg" alt="头像加载失败">
					</div>
					<div id="card-info">
						<!-- 昵称 -->
						<div id="nickname">CodeReaper</div>
						<!-- 个性签名 -->
						<div id="signature">个性签名：
							<p style="text-indent: 2em;">真正的大师，永远怀着一颗学徒的心。</p>
						</div>
						<!-- <br>哪一个比较沉重，你的剑刃，还是你的过去？ -->
					</div>
				</div>
				<!-- 音乐播放器部分 -->
				<div id="music-player">
					<div id="music-player-title">音乐播放器<svg t="1637946158457" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6421" width="200" height="200"><path d="M875.52 433.152q-7.168-1.024-12.8-10.24t-8.704-33.792q-5.12-39.936-26.112-58.88t-65.024-27.136q-46.08-9.216-81.408-37.376t-58.88-52.736q-22.528-21.504-34.816-15.36t-12.288 22.528l0 44.032 0 96.256q0 57.344-0.512 123.904t-0.512 125.952l0 104.448 0 58.368q1.024 24.576-7.68 54.784t-32.768 56.832-64 45.568-99.328 22.016q-60.416 3.072-109.056-21.504t-75.264-61.952-26.112-81.92 38.4-83.456 81.92-54.272 84.992-16.896 73.216 5.632 47.616 13.312l0-289.792q0-120.832 1.024-272.384 0-29.696 15.36-48.64t40.96-22.016q21.504-3.072 35.328 8.704t28.16 32.768 35.328 47.616 56.832 52.224q30.72 23.552 53.76 33.792t43.008 18.944 39.424 20.992 43.008 39.936q23.552 26.624 28.672 55.296t0.512 52.224-14.848 38.4-17.408 13.824z" p-id="6422" fill="#ffffff"></path></svg></div>
					<div id="music-song">
						<div id="current-play-tip">当前播放</div>
						<div id="current-play">
							<marquee ref="songNameDisplay" id="songNameDisplay" behavior="" direction="">hehe</marquee>
						</div>
					</div>
					<div id="control-panal">
						<div class="btn-div" @click="preSongClick()"><svg t="1637940873117" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2447" width="200" height="200"><path d="M206 865h-38c-30.928 0-56-25.072-56-56V216c0-30.928 25.072-56 56-56h38c30.928 0 56 25.072 56 56v593c0 30.928-25.072 56-56 56z m168.686-386.191l422.304-303.4c32.294-23.201 77.282-15.83 100.484 16.464A72 72 0 0 1 911 233.883v559.053c0 39.764-32.235 72-72 72a72 72 0 0 1-39.95-12.1L376.288 570.877c-25.73-17.16-32.677-51.93-15.517-77.66a56 56 0 0 1 13.915-14.408z" p-id="2448"></path></svg></div>
						<div class="btn-div" @click="playOrPause()" id="playOrPauseBtn">
							<svg v-if="!musicData.isMusicPlay" id="play" t="1637940535242" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1939" width="200" height="200"><path d="M128 138.666667c0-47.232 33.322667-66.666667 74.176-43.562667l663.146667 374.954667c40.96 23.168 40.853333 60.8 0 83.882666L202.176 928.896C161.216 952.064 128 932.565333 128 885.333333v-746.666666z" fill="" p-id="1940"></path></svg>
							<svg v-else t="1637944515065" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5430" width="200" height="200"><path d="M428.539658 833.494155c0 15.954367-13.053294 29.007661-29.007661 29.007661L285.613458 862.501816c-15.954367 0-29.007661-13.053294-29.007661-29.007661l0-639.423111c0-15.954367 13.053294-29.007661 29.007661-29.007661l113.918539 0c15.954367 0 29.007661 13.053294 29.007661 29.007661L428.539658 833.494155z" p-id="5431"></path><path d="M760.124635 833.494155c0 15.954367-13.053294 29.007661-29.007661 29.007661l-113.918539 0c-15.954367 0-29.007661-13.053294-29.007661-29.007661l0-639.423111c0-15.954367 13.053294-29.007661 29.007661-29.007661l113.918539 0c15.954367 0 29.007661 13.053294 29.007661 29.007661L760.124635 833.494155z" p-id="5432"></path></svg>
						</div>
						<div class="btn-div" @click="nextSongClick()"><svg t="1637940892477" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3099" width="200" height="200"><path d="M817 160h38c30.928 0 56 25.072 56 56v593c0 30.928-25.072 56-56 56h-38c-30.928 0-56-25.072-56-56V216c0-30.928 25.072-56 56-56zM648.314 546.191l-422.304 303.4c-32.294 23.201-77.282 15.83-100.484-16.464A72 72 0 0 1 112 791.117V232.064c0-39.764 32.235-72 72-72a72 72 0 0 1 39.95 12.1l422.762 281.959c25.73 17.16 32.677 51.93 15.517 77.66a56 56 0 0 1-13.915 14.408z" p-id="3100"></path></svg></div>
					</div>
				</div>
			</div>
	
			<div class="person-info-container">
				<!-- 联系方式 -->
				<div class="info-card">
					<div class="info-title">联系方式</div>
					<div class="info-content">
						<div class="key-value">
							<div class="key"><svg class="svg-icon" fill="#50c8fd" viewBox="0 0 24 24" width="30" height="30"><path d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.484 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.287.687 6.287 0 0-.688-1.768-1.182-1.768-1.182 2.085-1.77 1.905-3.967 1.905-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.166-6.954-2.166-6.954V9.325C18.29 3.364 14.268 2 12.003 2z" fill-rule="evenodd"></path></svg>
								<div class="key-text" style="background-color: #50c8fd;">
									QQ
								</div>
							</div>
							<div class="value">2210086948</div>
						</div>
						<div class="key-value">
							<div class="key"><svg class="svg-icon" fill="#60c84d" viewBox="0 0 24 24" width="30" height="30"><path d="M2.224 21.667s4.24-1.825 4.788-2.056C15.029 23.141 22 17.714 22 11.898 22 6.984 17.523 3 12 3S2 6.984 2 11.898c0 1.86.64 3.585 1.737 5.013-.274.833-1.513 4.756-1.513 4.756zm5.943-9.707c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272zm7.583 0c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272z" fill-rule="evenodd"></path></svg>
								<div class="key-text" style="background-color: #60c84d;">
									微信
								</div>
							</div>
							<div class="value">wxid_s8kuvn5dvgv922</div>
						</div>
						<div class="key-value">
							<div class="key"><svg t="1637742520611" class="icon svg-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2315" width="30" height="30"><path d="M838.954667 234.666667H170.666667c-3.626667 0-7.168 0.448-10.56 1.322666l323.690666 323.669334a21.333333 21.333333 0 0 0 30.165334 0L838.954667 234.666667z m46.144 14.186666l-260.693334 260.693334 262.933334 262.912c5.44-7.168 8.661333-16.106667 8.661333-25.792V277.333333c0-10.944-4.117333-20.906667-10.88-28.48zM843.861333 789.333333l-249.6-249.621333-50.133333 50.133333a64 64 0 0 1-90.517333 0l-50.112-50.133333L156.373333 786.88c4.48 1.578667 9.28 2.453333 14.314667 2.453333h673.194667zM128.661333 754.218667L373.333333 509.525333 129.578667 265.813333A42.709333 42.709333 0 0 0 128 277.333333v469.333334c0 2.56 0.213333 5.098667 0.661333 7.552zM170.666667 192h682.666666a85.333333 85.333333 0 0 1 85.333334 85.333333v469.333334a85.333333 85.333333 0 0 1-85.333334 85.333333H170.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V277.333333a85.333333 85.333333 0 0 1 85.333334-85.333333z" fill="#d81e06" p-id="2316"></path></svg>
								<div class="key-text" style="background-color: #d81e06;">
									邮箱
								</div>
							</div>
							<div class="value">2019152038@ezu.email.cn</div>
						</div>
					</div>
				</div>
	
				<!-- 个人网站 -->
				<div class="info-card">
					<div class="info-title">个人相关主页</div>
					<div class="info-content">
						<div class="key-value">
							<div class="key wide-key">
								<svg class="svg-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="30" height="30"><defs><clipPath id="prefix__clip-path"><path class="prefix__cls-1" d="M29.48 25.24c-.16-1.89-.08-1.5-.24-3.16a72.24 72.24 0 00-2-10.37L26 6.25l-2.6 5.41-.44.89q-.24.48-.54 1a20.43 20.43 0 01-1.24 1.84 20.08 20.08 0 01-3.08 3.24 19.72 19.72 0 01-3.87 2.53c-.72.33-1.45.71-2.23 1-.34.14-1.19.44-1.93.66a2.55 2.55 0 01-1.07-.3c-.34-1-.83-2.24-1.2-3.19-.5-1.25-1-2.5-1.51-3.73a59.11 59.11 0 00-3.62-7.25 59.82 59.82 0 001.51 7.94c.3 1.3.7 2.58 1.05 3.87S6 22.71 6.44 24a1.4 1.4 0 001.29.93c1.28 0 2.57.06 3.86.05s2.59 0 3.88-.11a56 56 0 007.79-.87c-1.92-.49-7.5-.81-10.79-1.06a43 43 0 006.53-1.7 24.06 24.06 0 005.38-3.45c.71-.62 1.21 1.88 2.39 5.27.62 1.69.34 1 1 2.66s1.37 4.38 2.17 6c-.07-1.82-.31-4.67-.46-6.48z"/></clipPath><clipPath id="prefix__clip-path-2"><path class="prefix__cls-1" d="M20.92 3.46a4.25 4.25 0 01.31 5.86 3.91 3.91 0 01-5.66.24 4.25 4.25 0 01-.31-5.86 3.91 3.91 0 015.66-.24m1.35-1.54a5.89 5.89 0 00-8.53.36 6.41 6.41 0 00.48 8.83 5.91 5.91 0 008.53-.36 6.41 6.41 0 00-.48-8.83z"/></clipPath></defs><g style="isolation:isolate"><g id="prefix__layer_1" data-name="layer 1"><path class="prefix__cls-1" d="M29.48 25.24c-.16-1.89-.08-1.5-.24-3.16a72.24 72.24 0 00-2-10.37L26 6.25l-2.6 5.41-.44.89q-.24.48-.54 1a20.43 20.43 0 01-1.24 1.84 20.08 20.08 0 01-3.08 3.24 19.72 19.72 0 01-3.87 2.53c-.72.33-1.45.71-2.23 1-.34.14-1.19.44-1.93.66a2.55 2.55 0 01-1.07-.3c-.34-1-.83-2.24-1.2-3.19-.5-1.25-1-2.5-1.51-3.73a59.11 59.11 0 00-3.62-7.25 59.82 59.82 0 001.51 7.94c.3 1.3.7 2.58 1.05 3.87S6 22.71 6.44 24a1.4 1.4 0 001.29.93c1.28 0 2.57.06 3.86.05s2.59 0 3.88-.11a56 56 0 007.79-.87c-1.92-.49-7.5-.81-10.79-1.06a43 43 0 006.53-1.7 24.06 24.06 0 005.38-3.45c.71-.62 1.21 1.88 2.39 5.27.62 1.69.34 1 1 2.66s1.37 4.38 2.17 6c-.07-1.82-.31-4.67-.46-6.48z"/><g clip-path="url(#prefix__clip-path)"><path class="prefix__cls-1" d="M-.87-.78h34.42v33.07H-.87z"/></g><path class="prefix__cls-1" d="M20.92 3.46a4.25 4.25 0 01.31 5.86 3.91 3.91 0 01-5.66.24 4.25 4.25 0 01-.31-5.86 3.91 3.91 0 015.66-.24m1.35-1.54a5.89 5.89 0 00-8.53.36 6.41 6.41 0 00.48 8.83 5.91 5.91 0 008.53-.36 6.41 6.41 0 00-.48-8.83z"/><g clip-path="url(#prefix__clip-path-2)"><path class="prefix__cls-1" d="M-.87-.78h34.42v33.07H-.87z"/></g></g></g></svg>
								<div class="key-text" style="background-color: #4a4646;">
									博客
								</div>
							</div>
							<div class="value"><a href="https://www.cnblogs.com/CodeReaper/" target="_blank">https://www.cnblogs.com/CodeReaper/</a></div>
						</div>
	
						<div class="key-value">
							<div class="key wide-key">
								<svg width="30" height="30" class="svg-icon" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
									<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16 0 0 7.16 0 16C0 23.08 4.58 29.06 10.94 31.18C11.74 31.32 12.04 30.84 12.04 30.42C12.04 30.04 12.02 28.78 12.02 27.44C8 28.18 6.96 26.46 6.64 25.56C6.46 25.1 5.68 23.68 5 23.3C4.44 23 3.64 22.26 4.98 22.24C6.24 22.22 7.14 23.4 7.44 23.88C8.88 26.3 11.18 25.62 12.1 25.2C12.24 24.16 12.66 23.46 13.12 23.06C9.56 22.66 5.84 21.28 5.84 15.16C5.84 13.42 6.46 11.98 7.48 10.86C7.32 10.46 6.76 8.82 7.64 6.62C7.64 6.62 8.98 6.2 12.04 8.26C13.32 7.9 14.68 7.72 16.04 7.72C17.4 7.72 18.76 7.9 20.04 8.26C23.1 6.18 24.44 6.62 24.44 6.62C25.32 8.82 24.76 10.46 24.6 10.86C25.62 11.98 26.24 13.4 26.24 15.16C26.24 21.3 22.5 22.66 18.94 23.06C19.52 23.56 20.02 24.52 20.02 26.02C20.02 28.16 20 29.88 20 30.42C20 30.84 20.3 31.34 21.1 31.18C27.42 29.06 32 23.06 32 16C32 7.16 24.84 0 16 0V0Z" fill="#24292E"/>
								</svg>
								<div class="key-text" style="background-color: #24292e;">
									Github
								</div>
							</div>
							<div class="value"><a href="https://github.com/WarriorOfShadow" target="_blank">https://github.com/WarriorOfShadow</a></div>
						</div>
	
						<div class="key-value">
							<div class="key wide-key">
								<img src="https://gitee.com/assets/favicon.ico" alt="" width="30" height="30" class="svg-icon">
								<div class="key-text" style="background-color: #d90013;">
									Gitee
								</div>
							</div>
							<div class="value"><a href="https://gitee.com/warrior__night/" target="_blank">https://gitee.com/warrior__night/</a></div>
						</div>
					</div>
					
				</div>
	
				<!-- 个人简介 -->
				<div class="info-card" id="profile">
					<div class="info-title">个人简介</div>
					<div class="info-content">
						<div class="profile-content">
							<table class="profile-table">
								<tr>
									<td rowspan="2" class="big-item">基本信息</td>
									<td class="table-item-key">大学</td><td class="table-item-key">姓名</td><td class="table-item-key">性别</td>
								</tr>
								<tr>
									<td class="table-item-value">深圳大学</td><td class="table-item-value">曾子恒</td><td class="table-item-value">男</td>
								</tr>
								<tr>
									<td class="table-item-key">学院</td>
									<td colspan="3" class="table-item-value">计算机与软件学院</td>
								</tr>
								<tr>
									<td class="table-item-key">专业</td>
									<td colspan="3" class="table-item-value">计算机科学与技术</td>
								</tr>
							</table>
							<div class="profile-text-box">
								<div class="profile-text">
									<p>我是19级计算机科学与技术专业高性能班的学生曾子恒。我平时喜欢学习新技术，捣鼓一些有意思的新玩意，比如单片机、前后端框架、游戏开发等等，再比如搭建这个个人主页时，我也使用了许多css3的新特性，如flex与grid布局、盒子阴影、渐变色等等。对于我来说，使用技术来创造属于自己的东西是一件非常有趣的事情，而我也一直在做着这些事，比如：学习新的编程语言、开发游戏、进行数据库设计与编写管理系统的前端和后端等等，因此，在计算机技术的学习过程中，我都感到非常的充实和愉快。除了研究技术之外，我也比较喜欢LOL这款游戏，不过游戏打得很菜，主要是做“云玩家”看比赛，例如LPL和S赛😄。</p>
								</div>
							</div>
						</div>
					</div>
				</div>
	
				<!-- 技术栈 -->
				<div class="info-card">
					<div class="info-title">我的技术栈</div>
					<div class="info-content">
						<ul id="it-content">
							<li id="front-end">
								前端：
								<ul>
									<li>
										<svg class="tiny-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m12 17.56 4.07-1.13.55-6.1H9.38L9.2 8.3h7.6l.2-1.99H7l.56 6.01h6.89l-.23 2.58-2.22.6-2.22-.6-.14-1.66h-2l.29 3.19L12 17.56M4.07 3h15.86L18.5 19.2 12 21l-6.5-1.8L4.07 3z" fill="#e44d26"/></svg>
										HTML、CSS、JavaScript（原生）</li>
									<li>
										<svg class="tiny-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>									
										Vue（前端框架Vue）</li>
									<li><svg class="tiny-icon" fill="none" height="26" viewBox="0 0 27 26" width="27" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m.98608 0h24.32332c.5446 0 .9861.436522.9861.975v24.05c0 .5385-.4415.975-.9861.975h-24.32332c-.544597 0-.98608-.4365-.98608-.975v-24.05c0-.538478.441483-.975.98608-.975zm13.63142 13.8324v-2.1324h-9.35841v2.1324h3.34111v9.4946h2.6598v-9.4946zm1.0604 9.2439c.4289.2162.9362.3784 1.5218.4865.5857.1081 1.2029.1622 1.8518.1622.6324 0 1.2331-.0595 1.8023-.1784.5691-.1189 1.0681-.3149 1.497-.5879s.7685-.6297 1.0187-1.0703.3753-.9852.3753-1.6339c0-.4703-.0715-.8824-.2145-1.2365-.1429-.3541-.3491-.669-.6186-.9447-.2694-.2757-.5925-.523-.9692-.7419s-.8014-.4257-1.2743-.6203c-.3465-.1406-.6572-.2771-.9321-.4095-.275-.1324-.5087-.2676-.7011-.4054-.1925-.1379-.3409-.2838-.4454-.4379-.1045-.154-.1567-.3284-.1567-.523 0-.1784.0467-.3392.1402-.4824.0935-.1433.2254-.2663.3959-.369s.3794-.1824.6269-.2392c.2474-.0567.5224-.0851.8248-.0851.22 0 .4523.0162.697.0486.2447.0325.4908.0825.7382.15.2475.0676.4881.1527.7218.2555.2337.1027.4495.2216.6475.3567v-2.4244c-.4015-.1514-.84-.2636-1.3157-.3365-.4756-.073-1.0214-.1095-1.6373-.1095-.6268 0-1.2207.0662-1.7816.1987-.5609.1324-1.0544.3392-1.4806.6203s-.763.6392-1.0104 1.0743c-.2475.4352-.3712.9555-.3712 1.5609 0 .7731.2268 1.4326.6805 1.9785.4537.546 1.1424 1.0082 2.0662 1.3866.363.146.7011.2892 1.0146.4298.3134.1405.5842.2865.8124.4378.2282.1514.4083.3162.5403.4946s.198.3811.198.6082c0 .1676-.0413.323-.1238.4662-.0825.1433-.2076.2676-.3753.373s-.3766.1879-.6268.2473c-.2502.0595-.5431.0892-.8785.0892-.5719 0-1.1383-.0986-1.6992-.2959-.5608-.1973-1.0805-.4933-1.5589-.8879z" fill="#fff" fill-rule="evenodd"></path></svg>
										TypeScript（JavaScript的超集）</li>
								</ul>
							</li>
							<li id="back-end">
								后端：
								<ul>
									<li><img class="tiny-icon" src="https://spring.io/images/favicon-9d25009f65637a49ac8d91eb1cf7b75e.ico" alt="#">
										Spring全家桶（Spring、SpringBoot、SpringCloud）</li>
									<li><img class="tiny-icon" src="https://mp.baomidou.com/favicon.ico" alt="#">
										Mybatis和Mybatis-Plus</li>
									<li><img class="tiny-icon" src="https://static1.smartbear.co/swagger/media/assets/swagger_fav.png" alt="#">
										swagger接口调试</li>
									<li><svg class="tiny-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 321.39 78.54"><title id="title19">DUBBO LOGO</title><path class="cls-1" d="M68.46 50.38c0 14.06 11.39 22.11 25.45 22.11s25.45-8.05 25.45-22.11V7.25H68.46zm21.24-28h8.6V31H89.7zm0 22.25h8.6v8.6H89.7zM33.24 7.25H4.06v64H33.24c10.95.0 19.3-7.18 23.29-17.15a45.12 45.12.0 002.38-14.87A45.12 45.12.0 0056.53 24.4C52.84 14.62 44.19 7.25 33.24 7.25zm.43 14.63H30.34a3.44 3.44.0 00-3.44 3.44V53.23a3.44 3.44.0 003.44 3.44h3.33v4.63h-8.3a6.87 6.87.0 01-6.87-6.87V24.12a6.87 6.87.0 016.87-6.87h8.3zM285.51 6.06c-17.05.0-30.88 10.28-30.88 33.21s13.83 33.21 30.88 33.21 30.88-10.28 30.88-33.21S302.56 6.06 285.51 6.06zm7.59 48.36a6.87 6.87.0 01-6.87 6.87h-8.3V56.67h3.33a3.44 3.44.0 003.44-3.44V25.31a3.44 3.44.0 00-3.44-3.44h-3.33V17.25h8.3a6.87 6.87.0 016.87 6.87zm-53.4-17.56A17.39 17.39.0 00227.31 7.25H195.1v64h32.21a19.44 19.44.0 0012.38-34.44zM211.63 61.29h-6.08l18.68-44h6.08zM177 36.85A17.39 17.39.0 00164.65 7.25H132.43v64h32.21A19.44 19.44.0 00177 36.85zM149 61.29h-6.08l18.68-44h6.08z" style="fill:#fff;fill-opacity:1"></path></svg>
										dubbo分布式开发</li>
									<li><img class="tiny-icon" src="https://static.djangoproject.com/img/icon-touch.e4872c4da341.png" alt="#">
										python的web框架Django</li>
									<li><img class="tiny-icon" src="https://www.php.net/favicon.ico" alt="">
										php基础</li>
								</ul>
							</li>
							<li id="game-dev">
								游戏开发：
								<ul>
									<li>
										<svg class="tiny-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16" xml:space="preserve">
										<path d="M14 3.5 8 0v2.3l3 1.8-4 2.3-4-2.3 3-1.8V0L0 3.5v6.9l2-1.2V5.8l4 2.3v4.7l-2.9-1.7-2 1.2L7 16l5.9-3.6-2-1.2L8 12.9V8.2l4-2.3v3.3l2 1.2V3.5z"/>
									</svg>
										了解Unity引擎
									</li>
									<li>
										<svg class="tiny-icon" viewBox="0 0 300 300"  xmlns="http://www.w3.org/2000/svg"><g style="fill:#4fc3f7"><path d="M417.62 175.39c-42.392 9.424-84.327 22.545-123.64 42.334.9 34.716 3.144 67.98 7.693 101.77-15.268 9.782-31.315 18.178-45.576 29.629-14.49 11.147-29.29 21.812-42.41 34.85-26.212-17.337-53.955-33.63-82.535-48.012-30.807 33.155-59.613 68.94-83.145 108.98 17.704 28.639 36.185 55.484 56.141 80.959h.559v245.77c.45.004.898.02 1.344.063l150.67 14.527a16.224 16.224 0 0 1 14.627 15.023l4.646 66.51 131.43 9.378 9.055-61.387a16.222 16.222 0 0 1 16.051-13.857h158.96c8.046 0 14.873 5.899 16.047 13.857l9.055 61.387 131.43-9.378 4.642-66.51a16.23 16.23 0 0 1 14.627-15.023l150.61-14.527c.446-.042.89-.059 1.34-.063v-19.611l.063-.02V525.91h.558c19.96-25.474 38.43-52.32 56.141-80.958-23.523-40.044-52.345-75.83-83.152-108.98-28.572 14.382-56.325 30.674-82.537 48.012-13.116-13.037-27.89-23.702-42.4-34.85-14.257-11.451-30.323-19.847-45.562-29.63 4.537-33.787 6.78-67.05 7.684-101.77-39.32-19.788-81.25-32.91-123.66-42.333-16.934 28.46-32.42 59.279-45.906 89.408-15.993-2.673-32.06-3.662-48.148-3.854v-.025c-.113 0-.217.025-.313.025-.1 0-.204-.025-.304-.025v.025c-16.118.191-32.171 1.181-48.168 3.854-13.48-30.13-28.956-60.948-45.914-89.408zm-119.2 359.52c50.151 0 90.799 40.617 90.799 90.752 0 50.168-40.648 90.809-90.799 90.809-50.126 0-90.787-40.641-90.787-90.809 0-50.134 40.661-90.752 90.787-90.752zm427.18 0c50.122 0 90.779 40.617 90.779 90.752 0 50.168-40.657 90.809-90.779 90.809-50.159 0-90.807-40.641-90.807-90.809 0-50.134 40.647-90.752 90.807-90.752zM512 588.019c16.143 0 29.254 11.908 29.254 26.561v83.59c0 14.665-13.111 26.562-29.254 26.562s-29.227-11.898-29.227-26.562v-83.59c0-14.652 13.084-26.561 29.227-26.561z" style="fill:#4fc3f7" transform="translate(11.605 -15.682) scale(.2703)"/><path d="m784.07 817.24-4.666 66.864c-.562 8.059-6.973 14.473-15.031 15.052l-160.49 11.451c-.392.03-.783.042-1.17.042-7.976 0-14.856-5.853-16.034-13.861l-9.203-62.414h-130.95l-9.204 62.414c-1.236 8.4-8.746 14.44-17.204 13.82l-160.49-11.451c-8.059-.579-14.469-6.994-15.031-15.052l-4.666-66.864-135.48-13.062c.062 14.56.25 30.512.25 33.688 0 143.09 181.51 211.86 407.02 212.65h.553c225.51-.791 406.96-69.566 406.96-212.65 0-3.235.196-19.12.262-33.688z" style="fill:#4fc3f7" transform="translate(11.605 -15.682) scale(.2703)"/></g></svg>
										了解Godot引擎，制作过相关demo</li>
								</ul>
							</li>
						</ul>
					</div>
				</div>
	
				<!-- 兴趣爱好 -->
				<div class="info-card">
					<div class="info-title">兴趣爱好</div>
					<div class="info-content">
						<div class="hobby-info-content">
							<div class="hobby-card">
								<div class="hobby-card-title">
									技术爱好
								</div>
								<div class="hobby-card-content">
									<div class="hobbies">
										<div class="hobby-name" v-for="(hobby, index) in hobbyData.itHobbies" @click="itHobbyTabClick(index)" :class="{active:index==hobbyData.itHobbyIndex}">{{hobby.name}}</div>
									</div>
									<div class="hobby-content">
										<p>{{hobbyData.itHobbies[hobbyData.itHobbyIndex].content}}</p>
									</div>
								</div>
							</div>
							<div class="hobby-card">
								<div class="hobby-card-title">
									休闲爱好
								</div>
								<div class="hobby-card-content">
									<div class="hobbies">
										<div class="hobby-name" v-for="(etm, index) in hobbyData.entertainments" @click="etmTabClick(index)" :class="{active:index==hobbyData.etmIndex}">{{etm.name}}</div>
									</div>
									<div class="hobby-content">
										<p>{{hobbyData.entertainments[hobbyData.etmIndex].content}}</p>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
	
				<!-- 个人作品展示 -->
				<div class="info-card" id="works">
					<div class="info-title">个人作品展示</div>
					<div class="info-content">
						<div class="work-content">
							<div class="work-card">
								<img src="img/PuzzleGame.png" alt="">
								<div class="work-describe">
									<span>基于QT的拼图小游戏</span>
								</div>
							</div>
							<div class="work-card">
								<img src="img/game_demo.png" alt="">
								<div class="work-describe">
									<span>使用Godot引擎制作的rpg demo</span>
								</div>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	
</body>
<script src="js/jquery.min.js"></script>
<script>
	var vm = new Vue({
		el: "#app",
		data() {
			return {
				hobbyData: {
					itHobbies: [
						{
							name: "写博客",
							content: "我学习新知识时往往会遇到学得快忘得也快的问题，因而我往往把学到的新东西总结到我的博客中，一方面可以在自己需要某方面学过的知识可以快速查阅找到解决方案，另一方面我的博客也是我自己每段时间里努力的证明，此外，博客中的文章往往也能在不经意间帮助到许多遇到困难的人，我觉得这也是一种人生价值的体现。"
						},
						{
							name: "学习新技术",
							content: "在计算机这个领域中，实在有太多可以学习的知识了，上到应用层开发，下到底层驱动甚至硬件的设计，都有着许多有趣的地方，就像是本次css实验这样，只有往深处学习，就会发现原来这个领域比我想象地还要更加地宽广和有趣。例如添加了许多css3的新特性后，我的页面变得焕然一新，原来web端的页面也可以变得那么好看；css用起来不够人性化，人们就发明了sass等css预处理器，使得css的编写更加地合理和优雅，我也可以更加轻松地完成这个页面的效果。"
						}
					],
					itHobbyIndex: 0,
					entertainments: [
						{
							name: "电竞及游戏",
							content: "现在游戏玩得相对较少，主要玩《王者荣耀》和《LOL》，而在《LOL》这个游戏里基本是个纯云玩家，因为水平太菜也不愿意花时间练习，所以一般上线都是去打几把人机，但这个游戏的比赛很有观赏性，所以我经常看LPL的比赛。"
						},
						{
							name: "视频",
							content: "我主要在b站看视频，主要喜欢看LOL比赛视频的剪辑，各个选手的rank集锦，还有尤其喜欢大司马的视频切片，虽然马老师状态下滑，混迹在白银分段，但我觉得很多时候他的节目效果还是独一档的，总能让观众忍俊不禁，而且可以让胃口变得很好（操作下饭）😂。"
						},
					],
					etmIndex: 0
				},
				musicData: {
					songs: [],
					isMusicPlay: false,
					songIndex: 0,
				}
			}
		},
		methods: {
			itHobbyTabClick(index) {
				this.hobbyData.itHobbyIndex = index;
			},
			etmTabClick(index) {
				this.hobbyData.etmIndex = index;
			},
			getSongs() {
				$.ajax({
					url: "/WebCourse/mysite/SongNameController.php",
					type: "get",
					async: true,
					success: function(retData) {
						var data = eval('(' + retData + ')');
						vm.musicData.songs = data;
						vm.changeSong(0);
					}
				})
			},
			changeSong(index) {
				var audio = this.$refs.realPlayer;
				var songNameDisplay = this.$refs.songNameDisplay;
				var songPath = `music/${this.musicData.songs[index]}`;
				audio.src = songPath;
				songNameDisplay.innerHTML = this.musicData.songs[index];
				if(this.musicData.isMusicPlay) {
					audio.play();
				}
			},
			playOrPause() {
				var audio = this.$refs.realPlayer;
				var songNameDisplay = this.$refs.songNameDisplay;
				if(!this.musicData.isMusicPlay) {
					audio.play();
					songNameDisplay.start();
				}
				else {
					audio.pause();
					songNameDisplay.stop();
				}
				this.musicData.isMusicPlay = !this.musicData.isMusicPlay;
			},
			preSongClick() {
				this.musicData.songIndex = (this.musicData.songIndex + (this.musicData.songs.length-1)) % this.musicData.songs.length;
				this.changeSong(this.musicData.songIndex);
			},
			nextSongClick() {
				this.musicData.songIndex = (this.musicData.songIndex + 1) % this.musicData.songs.length;
				this.changeSong(this.musicData.songIndex);
			}
		},
		computed: {
			itHobbieContent(index) {
				return this.itHobbies[index].content;
			}
		},
		mounted() {
			this.$refs.songNameDisplay.stop();
			this.getSongs();
			// 歌曲播放结束回调
			this.$refs.realPlayer.addEventListener('ended', function () {  
				vm.nextSongClick();
			}, false);
		},
	})
</script>
</html>